<template>
  <mt-datetime-picker
    ref="timerPicker"
    type="date"
    v-model="date"
    year-format="{value} 年"
    month-format="{value} 月"
    date-format="{value} 日"
    @confirm="handleChange"
    :startDate="new Date('1949-10-01')"
    :endDate="new Date()"
    :visibleItemCount="5"
  >
  </mt-datetime-picker>
</template>

<script>
  import {DatetimePicker} from 'mint-ui';

  let components = {};
  components[DatetimePicker.name] = DatetimePicker;
  export default {
    components: components,
    name: 'tsTimePicker',
    props: {
      value: {}
    },
    data() {
      return {
        date: this.value
      }
    },
    methods: {
      handleChange(value) {
        this.date = this.formatDate(value);
        this.$emit('confirm', this.date);
      },
      open() {
        this.$refs['timerPicker'].open();
      },
      close() {
        this.$refs['timerPicker'].close();
      },
      formatDate(date) {
        let d = new Date(date),
          month = '' + (d.getMonth() + 1),
          day = '' + d.getDate(),
          year = d.getFullYear();

        if (month.length < 2) month = '0' + month;
        if (day.length < 2) day = '0' + day;

        return [year, month, day].join('-');
      }
    }
  }
</script>
